<template>
	<view class="page-container">

		<!-- 搜索框 -->
		<view class="search-box">
			<view class="search-input-wrap">
				<text class="search-icon">🔍</text>
				<input class="search-input" type="text" placeholder="搜索订单号、收件人或商品名称" v-model="searchKeyword"
					@confirm="handleSearch" confirm-type="search" />
				<text class="clear-icon" v-if="searchKeyword" @click="clearSearch">×</text>
			</view>
		</view>

		<view v-if="loading && !loadingMore" class="loading">
			<view class="loading-spinner"></view>
			<text>加载中...</text>
		</view>

		<view v-else class="content-wrapper">
			<view v-if="orders.length === 0" class="empty-state">
				<view class="empty-icon">📦</view>
				<text class="empty-title">暂无订单</text>
				<text class="empty-subtitle">您还没有任何订单记录</text>
				<view class="empty-action" @click="goShopping">
					<text>去购物</text>
				</view>
			</view>

			<view v-else class="orders-container">
				<view v-for="order in orders" :key="order.id" class="order-card" @click="goToOrderDetail(order.id)">
					<!-- 订单头部 -->
					<view class="order-header">
						<view class="order-info-left">
							<text class="order-number">{{ order.orderNo || '未知订单号' }}</text>
							<text class="order-date">{{ formatDateTime(order.createdAt) }}</text>
						</view>
						<view class="status-badge" :class="getStatusClass(order)">
							<text class="status-text">{{ getDisplayStatus(order) }}</text>
						</view>
					</view>

					<!-- 倒计时区域 -->
					<view class="countdown-container"
						v-if="(order.status === 'pending' || order.status === 0) && !isOrderExpired(order.id) && !order.countdownExpired">
						<view class="countdown-icon">⏰</view>
						<text class="countdown-text">支付剩余时间：</text>
						<text class="countdown-timer">{{ getCountdownText(order) }}</text>
					</view>

					<!-- 商品列表 -->
					<view class="products-section">
						<template v-if="order.items && order.items.length > 0">
							<view v-for="item in order.items" :key="item.id" class="product-item">
								<image
									:src="(item.product && item.product.image) ? item.product.image : '/static/images/default-category.png'"
									class="product-image" mode="aspectFill" />
								<view class="product-details">
									<text class="product-name">{{ item.product?.name || '商品名称' }}</text>
									<text class="product-specs" v-if="item.sku?.specs">{{ item.sku.specs }}</text>
									<view class="product-bottom">
										<text class="product-price">¥{{ formatPrice(item.sku?.price || 0) }}</text>
										<text class="product-quantity">×{{ item.quantity || 1 }}</text>
									</view>
								</view>
							</view>
						</template>
						<view v-else class="no-products">
							<text>暂无商品信息</text>
						</view>
					</view>

					<!-- 订单底部信息 -->
					<view class="order-footer">
						<view class="price-info">
							<text class="price-label">商品金额：</text>
							<text class="price-value">¥{{ formatPrice(order.goodsAmount || 0) }}</text>
						</view>
						<view class="price-info" v-if="order.deliveryFee">
							<text class="price-label">配送费：</text>
							<text class="price-value">¥{{ formatPrice(order.deliveryFee) }}</text>
						</view>
						<view class="total-price">
							<text class="total-label">实付款：</text>
							<text class="total-amount">¥{{ formatPrice(order.totalAmount) }}</text>
						</view>
					</view>

					<!-- 操作按钮 -->
					<view class="action-buttons" v-if="getOrderActions(order).length > 0">
						<view v-for="action in getOrderActions(order)" :key="action.type" class="action-btn"
							:class="action.class" @click.stop="handleAction(action.type, order)">
							<text>{{ action.text }}</text>
						</view>
					</view>
				</view>

				<!-- 底部加载更多指示器 -->
				<view class="load-more" v-if="orders.length > 0">
					<view v-if="loadingMore" class="loading-more">
						<view class="loading-spinner small"></view>
						<text>加载更多...</text>
					</view>
					<view v-else-if="!hasMore" class="no-more">
						<text>没有更多订单了</text>
					</view>
					<view v-else class="pull-more" @tap="loadMore">
						<text>点击加载更多</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted
	} from 'vue';
	import {
		orderApi
	} from '../../api/order.js';
	import {
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app';

	const orders = ref([]);
	const loading = ref(true);
	const countdownTimers = ref({});
	const countdownMinutes = 10;
	let isRefreshing = false;
	let lastRefreshTime = 0;
	const searchKeyword = ref('');

	// 分页相关
	const currentPage = ref(1);
	const pageSize = ref(10);
	const hasMore = ref(true);
	const loadingMore = ref(false);

	// 检查订单是否已标记为过期
	const isOrderExpired = (id) => {
		try {
			const expiredOrders = uni.getStorageSync('expired_orders') || [];
			return expiredOrders.includes(String(id));
		} catch (e) {
			return false;
		}
	};

	// 标记订单为已过期
	const markOrderExpired = (id) => {
		try {
			const expiredOrders = uni.getStorageSync('expired_orders') || [];
			if (!expiredOrders.includes(String(id))) {
				expiredOrders.push(String(id));
				uni.setStorageSync('expired_orders', expiredOrders);
			}
		} catch (e) {
			console.error('保存过期订单记录失败', e);
		}
	};

	// 检查订单是否过期
	const checkOrderExpiry = (order) => {
		if (!order || !order.createdAt) return false;
		if (order.status !== 'pending' && order.status !== 0) return false;

		try {
			let createdAt;
			if (typeof order.createdAt === 'string') {
				// 为了兼容iOS，将日期字符串转换为标准格式
				const dateStr = order.createdAt.replace(/-/g, '/').replace('T', ' ').split('.')[0];
				createdAt = new Date(dateStr);
				
				// 检查日期是否有效
				if (isNaN(createdAt.getTime())) {
					return false;
				}
			} else {
				createdAt = new Date(order.createdAt);
			}

			const expiryTime = new Date(createdAt.getTime() + countdownMinutes * 60 * 1000);
			return new Date() > expiryTime;
		} catch (e) {
			return false;
		}
	};

	// 获取订单列表 - 修改为支持分页
	const loadOrders = async (forceRefresh = false) => {
		const now = Date.now();
		
		
		if (!forceRefresh && isRefreshing) {
			return;
		}
		if (!forceRefresh && now - lastRefreshTime < 5000) {
			return;
		}

		isRefreshing = true;
		lastRefreshTime = now;

		// 如果是强制刷新，重置分页参数
		if (forceRefresh) {
			currentPage.value = 1;
			hasMore.value = true;
			loading.value = true;
			orders.value = [];
		} else if (loadingMore.value) {
			// 如果是加载更多，不显示全屏loading
			loading.value = false;
		} else {
			loading.value = true;
		}

		try {
			// 传递搜索关键词参数和分页参数
			const params = {
				page: currentPage.value,
				pageSize: pageSize.value
			};
			if (searchKeyword.value) {
				params.searchKeyword = searchKeyword.value.trim();
			}

			const res = await orderApi.getOrders(params);
			if (res.code === 200) {
				const newOrders = res.data.items || [];
				const total = res.data.total || 0;

				// 判断是否还有更多数据
				const previousHasMore = hasMore.value;
				hasMore.value = currentPage.value * pageSize.value < total;
				

				// 处理订单数据
				newOrders.forEach(order => {
					// 状态映射
					if (order.status === null || order.status === undefined) {
						if (order.cancelReason) {
							order.status = 'cancelled';
						} else if (order.paymentTime) {
							order.status = 'paid';
						} else {
							order.status = 'pending';
						}
					}

					// 处理过期订单
					if (isOrderExpired(order.id)) {
						order.countdownExpired = true;
						order.status = 'cancelled';
					} else if ((order.status === 'pending' || order.status === 0) && checkOrderExpiry(
							order)) {
						order.countdownExpired = true;
						order.status = 'cancelled';
						markOrderExpired(order.id);
					}
				});

				// 如果是刷新，替换数据；如果是加载更多，追加数据
				if (forceRefresh) {
					orders.value = newOrders;
				} else {
					orders.value = [...orders.value, ...newOrders];
				}

				// 更新倒计时
				clearAllTimers();
				orders.value.forEach(order => {
					if ((order.status === 'pending' || order.status === 0) && !isOrderExpired(order.id) &&
						!order.countdownExpired) {
						startCountdown(order.id, order.createdAt);
					}
				});

				// 如果有数据，增加页码
				if (newOrders.length > 0) {
					const previousPage = currentPage.value;
					currentPage.value++;
				} 
			} else {
				uni.showToast({
					title: res.msg || '获取订单失败',
					icon: 'none'
				});
			}
		} catch (e) {
			uni.showToast({
				title: '获取订单失败',
				icon: 'none'
			});
		} finally {
			loading.value = false;
			isRefreshing = false;
			loadingMore.value = false;
		}
	};

	// 清除所有定时器
	const clearAllTimers = () => {
		Object.keys(countdownTimers.value).forEach(orderId => {
			clearInterval(countdownTimers.value[orderId].timer);
		});
		countdownTimers.value = {};
	};

	// 获取订单的显示状态
	const getDisplayStatus = (order) => {
		// 检查是否为已取消订单（优先级最高）
		if (order.orderStatus === 5) {
			return '已取消';
		}

		// 检查订单是否已过期
		if ((order.status === 'pending' || order.payStatus === 0) && (isOrderExpired(order.id) || order
				.countdownExpired)) {
			return '已取消';
		}

		// 使用格式化后的状态
		const status = formatStatus(mapOrderStatusToString(order.payStatus, order.orderStatus, order.deliveryType));
		return status;
	};

	// 映射订单状态（与后端保持一致）
	const mapOrderStatusToString = (payStatus, orderStatus, deliveryType) => {
		// 订单已取消
		if (orderStatus === 5) {
			return 'cancelled';
		}

		// 根据支付状态和订单状态映射
		if (payStatus === 0) {
			return 'pending';
		} else if (payStatus === 1) {
			if (orderStatus === 0 || orderStatus === 1 || orderStatus === 2) {
				return 'paid';
			} else if (orderStatus === 3) {
				return 'shipping';
			} else if (orderStatus === 6) {
				// 区分自提和同城配送
				if (deliveryType === 'self') {
					return 'ready_for_pickup'; // 待自提
				} else {
					return 'delivered'; // 已送达，待确认收货
				}
			} else if (orderStatus === 4) {
				return 'completed';
			} else {
				return 'paid'; // 默认为已支付
			}
		} else if (payStatus === 2) {
			return 'refunded';
		}

		return 'pending'; // 默认为待付款
	};

	// 获取状态样式类
	const getStatusClass = (order) => {
		// 直接根据订单状态字符串获取样式类
		const statusStr = mapOrderStatusToString(order.payStatus, order.orderStatus, order.deliveryType);
		
		// 使用状态字符串直接映射到样式类
		const classMap = {
			'pending': 'status-pending',
			'paid': 'status-paid',
			'shipping': 'status-shipping',
			'delivered': 'status-delivered',
			'ready_for_pickup': 'status-ready-pickup',
			'completed': 'status-completed',
			'cancelled': 'status-cancelled',
			'refunded': 'status-refunded'
		};
		
		// 返回对应的样式类，如果没有匹配则返回默认样式
		return classMap[statusStr] || 'status-default';
	};

	// 获取订单操作按钮
	const getOrderActions = (order) => {
		const actions = [];

		// 首先检查订单是否已取消（多种情况判断）
		if (order.orderStatus === 5 || order.status === 'cancelled' || getDisplayStatus(order) === '已取消' || order.countdownExpired || isOrderExpired(order.id)) {
			// 已取消订单
			actions.push({
				type: 'delete',
				text: '删除订单',
				class: 'btn-secondary'
			});
			actions.push({
				type: 'buy-again',
				text: '再次购买',
				class: 'btn-primary'
			});
		}
		// 根据订单状态设置可用操作
		else if (order.payStatus === 0 && !isOrderExpired(order.id) && !order.countdownExpired) {
			// 待付款
			actions.push({
				type: 'pay',
				text: '去支付',
				class: 'btn-primary'
			});
			actions.push({
				type: 'cancel',
				text: '取消订单',
				class: 'btn-secondary'
			});
		} else if (order.payStatus === 1 && order.orderStatus === 6) {
			if (order.deliveryType === 'self') {
				// 待自提
				actions.push({
					type: 'contact',
					text: '联系商家',
					class: 'btn-secondary'
				});
				actions.push({
					type: 'pickup',
					text: '确认取货',
					class: 'btn-primary'
				});
			} else {
				// 待收货（已配送）
				actions.push({
					type: 'logistics',
					text: '查看物流',
					class: 'btn-secondary'
				});
				actions.push({
					type: 'confirm',
					text: '确认收货',
					class: 'btn-primary'
				});
			}
		} else if (order.orderStatus === 4) {
			// 已完成
			const hasUnreviewedItems = order.items && order.items.some(item => item.reviewStatus === 0);
			
			if (hasUnreviewedItems) {
				actions.push({
					type: 'review',
					text: '评价',
					class: 'btn-secondary'
				});
			}
			
			// 所有已完成的订单都可以删除和再次购买
			actions.push({
				type: 'delete',
				text: '删除',
				class: 'btn-secondary'
			});
			actions.push({
				type: 'buy-again',
				text: '再次购买',
				class: 'btn-primary'
			});
		} else if (order.payStatus === 2) {
			// 已退款
			actions.push({
				type: 'delete',
				text: '删除订单',
				class: 'btn-secondary'
			});
			actions.push({
				type: 'buy-again',
				text: '再次购买',
				class: 'btn-primary'
			});
		} else {
			// 其他状态
			actions.push({
				type: 'view',
				text: '查看详情',
				class: 'btn-secondary'
			});
		}

		return actions;
	};

	// 处理订单操作
	const handleAction = async (action, order) => {
		switch (action) {
			case 'pay':
				goToPayment(order.id, order.totalAmount);
				break;
			case 'cancel':
				handleCancelOrder(order.id);
				break;
			case 'delete':
				handleDeleteOrder(order.id);
				break;
			case 'confirm':
				confirmReceive(order.id);
				break;
			case 'view':
				goToOrderDetail(order.id);
				break;
			case 'logistics':
				viewLogistics(order.id);
				break;
			case 'review':
				goToReview(order);
				break;
			case 'buy-again':
				handleBuyAgain(order.id);
				break;
			case 'pickup':
				handlePickup(order.id);
				break;
			case 'contact':
				contactService();
				break;
		}
	};

	// 再次购买
	const handleBuyAgain = async (orderId) => {
		try {
			uni.showLoading({
				title: '处理中...'
			});
			const response = await orderApi.buyAgain(orderId);

			if (response.code === 200) {
				uni.showToast({
					title: response.data.message || '已添加到购物车',
					icon: 'success'
				});

				// 延迟后跳转到购物车
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/cart/cart'
					});
				}, 1500);
			} else {
				uni.showToast({
					title: response.msg || '操作失败',
					icon: 'none'
				});
			}
		} catch (error) {
			uni.showToast({
				title: '操作失败，请稍后再试',
				icon: 'none'
			});
		} finally {
			uni.hideLoading();
		}
	};

	// 开始倒计时
	const startCountdown = (orderId, createdAt) => {
		if (!createdAt || isOrderExpired(orderId)) return;

		if (countdownTimers.value[orderId] && countdownTimers.value[orderId].timer) {
			clearInterval(countdownTimers.value[orderId].timer);
		}

		const updateCountdown = () => {
			let createdAtDate;
			if (typeof createdAt === 'string') {
				// 为了兼容iOS，将日期字符串转换为标准格式
				const dateStr = createdAt.replace(/-/g, '/').replace('T', ' ').split('.')[0];
				createdAtDate = new Date(dateStr);
				
				// 检查日期是否有效
				if (isNaN(createdAtDate.getTime())) {
					console.warn('无效的订单创建时间:', createdAt);
					return;
				}
			} else {
				createdAtDate = new Date(createdAt);
			}

			const expiryTime = new Date(createdAtDate.getTime() + countdownMinutes * 60 * 1000);
			const now = new Date();
			const remainingTime = expiryTime - now;

			if (remainingTime <= 0) {
				clearInterval(countdownTimers.value[orderId].timer);
				countdownTimers.value[orderId].text = '已超时';

				const orderIndex = orders.value.findIndex(o => o.id === orderId);
				if (orderIndex !== -1) {
					orders.value[orderIndex].countdownExpired = true;
					orders.value[orderIndex].status = 'cancelled';
				}

				markOrderExpired(orderId);

				setTimeout(() => {
					if (!isRefreshing && Date.now() - lastRefreshTime > 30000) {
						loadOrders(true);
					}
				}, 5000);
				return;
			}

			const minutes = Math.floor(remainingTime / (60 * 1000));
			const seconds = Math.floor((remainingTime % (60 * 1000)) / 1000);
			countdownTimers.value[orderId].text =
				`${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
		};

		countdownTimers.value[orderId] = {
			text: '--:--',
			timer: null
		};

		updateCountdown();
		countdownTimers.value[orderId].timer = setInterval(updateCountdown, 1000);
	};

	// 获取订单的倒计时文本
	const getCountdownText = (order) => {
		if (isOrderExpired(order.id) || order.countdownExpired) {
			return '已超时';
		}
		if (countdownTimers.value[order.id]) {
			return countdownTimers.value[order.id].text;
		}
		return '--:--';
	};
	
	
	// 取消订单
	const handleCancelOrder = (orderId) => {
		uni.showModal({
			title: '提示',
			content: '确定要取消订单吗？',
			success: async (res) => {
				if (res.confirm) {
					try {
						uni.showLoading({
							title: '取消中...'
						});
						const response = await orderApi.cancelOrder(orderId, '用户主动取消');

						if (response.code === 200) {
							uni.showToast({
								title: '订单已取消',
								icon: 'success'
							});

							// 重新加载订单列表
							setTimeout(() => {
								loadOrders(true);
							}, 1500);
						} else {
							uni.showToast({
								title: response.msg || '取消订单失败',
								icon: 'none'
							});
						}
					} catch (error) {
						uni.showToast({
							title: '取消订单失败，请稍后再试',
							icon: 'none'
						});
					} finally {
						uni.hideLoading();
					}
				}
			}
		});
	};
	
	// 删除订单
	const handleDeleteOrder = (orderId) => {
		uni.showModal({
			title: '提示',
			content: '确定要删除订单吗？删除后不可恢复',
			success: async (res) => {
				if (res.confirm) {
					try {
						uni.showLoading({
							title: '删除中...'
						});
						const response = await orderApi.deleteOrder(orderId);

						if (response.code === 200) {
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});

							// 重新加载订单列表
							setTimeout(() => {
								loadOrders(true);
							}, 1500);
						} else {
							uni.showToast({
								title: response.msg || '删除失败',
								icon: 'none'
							});
						}
					} catch (error) {
						uni.showToast({
							title: '删除失败，请稍后再试',
							icon: 'none'
						});
					} finally {
						uni.hideLoading();
					}
				}
			}
		});
	};
	
	// 确认收货
	const confirmReceive = (orderId) => {
		uni.showModal({
			title: '提示',
			content: '确认已收到商品吗？',
			success: async (res) => {
				if (res.confirm) {
					try {
						uni.showLoading({
							title: '处理中...'
						});
						const response = await orderApi.completeOrder(orderId);
	
						if (response.code === 200) {
							uni.showToast({
								title: '确认收货成功',
								icon: 'success'
							});
	
							// 重新加载订单详情
							setTimeout(() => {
								loadOrderDetail();
							}, 1500);
						} else {
							uni.showToast({
								title: response.msg || '确认收货失败',
								icon: 'none'
							});
						}
					} catch (error) {
						console.error('确认收货失败:', error);
						uni.showToast({
							title: '确认收货失败，请稍后再试',
							icon: 'none'
						});
					} finally {
						uni.hideLoading();
					}
				}
			}
		});
	};

	const goToOrderDetail = (orderId) => {
		uni.navigateTo({
			url: `/pages/order/detail?id=${orderId}`
		});
	};

	const goShopping = () => {
		uni.switchTab({
			url: '/pages/index/index'
		});
	};

	// 格式化订单状态
	const formatStatus = (status) => {
		const statusStr = String(status).toLowerCase();
		const statusMap = {
			'pending': '待付款',
			'paid': '备货中',
			'shipping': '配送中',
			'delivered': '待确认收货',
			'ready_for_pickup': '待自提',
			'completed': '已完成',
			'cancelled': '已取消',
			'refunding': '退款中',
			'refunded': '已退款',
			'0': '待付款',
			'1': '备货中',
			'2': '备货中',
			'3': '配送中',
			'4': '已完成',
			'5': '已取消',
			'6': '待确认收货',
			'7': '已退款'
		};
		
		if (statusMap[statusStr] !== undefined) {
			return statusMap[statusStr];
		}
		
		if (typeof status === 'number') {
			switch (status) {
				case 0:
					return '待付款';
				case 1:
					return '备货中';
				case 2:
					return '备货中';
				case 3:
					return '配送中';
				case 6:
					return '待确认收货';
				case 4:
					return '已完成';
				case 5:
					return '已取消';
				case 7:
					return '已退款';
			}
		}
		
		return '未知';
	};

	// 格式化日期时间
	const formatDateTime = (dateTime) => {
		if (!dateTime) return '';

		try {
			let date;
			if (typeof dateTime === 'string') {
				// 为了兼容iOS，将日期字符串转换为标准格式
				const dateStr = dateTime.replace(/-/g, '/').replace('T', ' ').split('.')[0];
				date = new Date(dateStr);
			} else {
				date = new Date(dateTime);
			}

			// 检查日期是否有效
			if (isNaN(date.getTime())) {
				console.warn('无效的日期:', dateTime);
				return typeof dateTime === 'string' ? dateTime.substring(0, 16) : String(dateTime);
			}

			return date.getFullYear() + '-' +
				String(date.getMonth() + 1).padStart(2, '0') + '-' +
				String(date.getDate()).padStart(2, '0') + ' ' +
				String(date.getHours()).padStart(2, '0') + ':' +
				String(date.getMinutes()).padStart(2, '0');
		} catch (e) {
			console.error('日期格式化错误:', e);
			return typeof dateTime === 'string' ? dateTime.substring(0, 16) : String(dateTime);
		}
	};

	const formatPrice = (price) => {
		if (price === null || price === undefined) return '0.00';
		if (typeof price !== 'number') price = parseFloat(price);
		if (isNaN(price)) return '0.00';
		return price.toFixed(2);
	};

	// 处理加载更多
	const loadMore = () => {
		
		if (!hasMore.value || loadingMore.value || loading.value) {
			return;
		}
		loadingMore.value = true;
		loadOrders();
	};

	// 处理搜索
	const handleSearch = () => {
		currentPage.value = 1;
		hasMore.value = true;
		loadOrders(true);
	};

	// 清除搜索
	const clearSearch = () => {
		searchKeyword.value = '';
		currentPage.value = 1;
		hasMore.value = true;
		loadOrders(true);
	};

	// 下拉刷新
	onPullDownRefresh(() => {
		currentPage.value = 1;
		hasMore.value = true;
		loadOrders(true).then(() => {
			uni.stopPullDownRefresh();
		});
	});

	// 触底加载更多
	onReachBottom(() => {
		loadMore();
	});

	// 确认取货
	const handlePickup = (orderId) => {
		uni.showModal({
			title: '提示',
			content: '确认已取货吗？',
			success: async (res) => {
				if (res.confirm) {
					try {
						uni.showLoading({
							title: '处理中...'
						});
						const response = await orderApi.confirmSelfPickup(orderId);

						if (response.code === 200) {
							uni.showToast({
								title: '确认取货成功',
								icon: 'success'
							});

							// 重新加载订单列表
							setTimeout(() => {
								loadOrders(true);
							}, 1500);
						} else {
							uni.showToast({
								title: response.msg || '确认取货失败',
								icon: 'none'
							});
						}
					} catch (error) {
						uni.showToast({
							title: '确认取货失败，请稍后再试',
							icon: 'none'
						});
					} finally {
						uni.hideLoading();
					}
				}
			}
		});
	};

	// 联系客服
	const contactService = () => {
		uni.showToast({
			title: '客服功能暂未开放',
			icon: 'none'
		});
	};

	onMounted(() => {
		loadOrders(true);
	});

	onUnmounted(() => {
		clearAllTimers();
	});
</script>

<style scoped>
	.page-container {
		min-height: 100vh;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		padding-bottom: 40rpx;
	}

	.loading {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #999;
		margin-top: 100rpx;
	}

	.loading-spinner {
		width: 60rpx;
		height: 60rpx;
		border: 4rpx solid #f5f5f5;
		border-top: 4rpx solid #ff6700;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 20rpx;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.content-wrapper {
		flex: 1;
		background: #f8f9fa;
		border-radius: 30rpx 30rpx 0 0;
		min-height: calc(100vh - 120rpx);
		padding: 30rpx 20rpx 0 20rpx;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 100rpx 40rpx;
		text-align: center;
	}

	.empty-icon {
		font-size: 120rpx;
		margin-bottom: 30rpx;
		opacity: 0.6;
	}

	.empty-title {
		font-size: 32rpx;
		color: #333;
		font-weight: 600;
		margin-bottom: 16rpx;
	}

	.empty-subtitle {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 40rpx;
		line-height: 1.5;
	}

	.empty-action {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: #fff;
		padding: 20rpx 40rpx;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-weight: 500;
	}

	.orders-container {
		padding-bottom: 20rpx;
	}

	.order-card {
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 24rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.08);
		transition: transform 0.2s ease;
	}

	.order-card:active {
		transform: translateY(2rpx);
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 24rpx 24rpx 20rpx 24rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.order-info-left {
		flex: 1;
	}

	.order-number {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 8rpx;
		display: block;
	}

	.order-date {
		font-size: 22rpx;
		color: #999;
	}

	.status-badge {
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		font-weight: 500;
	}

	.status-pending {
		background-color: #fff8e1;
		color: #ff9800;
	}

	.status-paid {
		background-color: #e3f2fd;
		color: #2196f3;
	}

	.status-shipping {
		background-color: #e8f5e9;
		color: #4caf50;
	}

	.status-delivered {
		background-color: #e1f5fe;
		color: #03a9f4;
	}

	.status-ready-pickup {
		background-color: #ede7f6;
		color: #673ab7;
	}

	.status-completed {
		background-color: #e8f5e9;
		color: #4caf50;
	}

	.status-cancelled, .status-refunded {
		background-color: #f5f5f5;
		color: #9e9e9e;
	}

	.countdown-container {
		display: flex;
		align-items: center;
		padding: 16rpx 24rpx;
		background: linear-gradient(90deg, rgba(255, 152, 0, 0.05), rgba(255, 193, 7, 0.05));
		border-left: 4rpx solid #ff9800;
		margin: 0 24rpx 20rpx 24rpx;
		border-radius: 0 8rpx 8rpx 0;
	}

	.countdown-icon {
		font-size: 24rpx;
		margin-right: 8rpx;
	}

	.countdown-text {
		font-size: 24rpx;
		color: #ff9800;
		margin-right: 8rpx;
	}

	.countdown-timer {
		font-size: 24rpx;
		color: #ff9800;
		font-weight: 600;
		font-family: 'Monaco', monospace;
	}

	.products-section {
		padding: 0 24rpx 20rpx 24rpx;
	}

	.product-item {
		display: flex;
		margin-bottom: 20rpx;
	}

	.product-item:last-child {
		margin-bottom: 0;
	}

	.product-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 12rpx;
		background: #f5f5f5;
		margin-right: 16rpx;
		flex-shrink: 0;
	}

	.product-details {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.product-name {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
		line-height: 1.4;
		margin-bottom: 8rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.product-specs {
		font-size: 22rpx;
		color: #999;
		margin-bottom: 12rpx;
	}

	.product-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.product-price {
		font-size: 26rpx;
		color: #ff6b35;
		font-weight: 600;
	}

	.product-quantity {
		font-size: 24rpx;
		color: #666;
	}

	.no-products {
		text-align: center;
		color: #999;
		padding: 40rpx 0;
		font-size: 24rpx;
	}

	.order-footer {
		padding: 20rpx 24rpx;
		border-top: 1rpx solid #f5f5f5;
		background: rgba(248, 249, 250, 0.5);
	}

	.price-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.price-info:last-child {
		margin-bottom: 0;
	}

	.price-label {
		font-size: 24rpx;
		color: #666;
	}

	.price-value {
		font-size: 24rpx;
		color: #333;
	}

	.total-price {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 12rpx;
		padding-top: 12rpx;
		border-top: 1rpx solid #eee;
	}

	.total-label {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
	}

	.total-amount {
		font-size: 28rpx;
		color: #ff6b35;
		font-weight: 600;
	}

	.action-buttons {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 20rpx 24rpx;
		gap: 16rpx;
		border-top: 1rpx solid #f5f5f5;
	}

	.action-btn {
		padding: 12rpx 24rpx;
		border-radius: 24rpx;
		font-size: 24rpx;
		font-weight: 500;
		text-align: center;
		min-width: 120rpx;
		transition: all 0.2s ease;
	}

	.btn-primary {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: #fff;
	}

	.btn-primary:active {
		opacity: 0.8;
	}

	.btn-secondary {
		background: #fff;
		color: #666;
		border: 1rpx solid #e0e0e0;
	}

	.btn-secondary:active {
		background: #f5f5f5;
	}

	/* 响应式适配 */
	@media screen and (max-width: 750rpx) {
		.order-header {
			flex-direction: column;
			align-items: flex-start;
		}

		.status-badge {
			margin-top: 12rpx;
			align-self: flex-start;
		}

		.action-buttons {
			flex-wrap: wrap;
			gap: 12rpx;
		}

		.action-btn {
			flex: 1;
			min-width: auto;
		}
	}

	/* 动画效果 */
	.order-card {
		animation: slideInUp 0.3s ease-out;
	}

	@keyframes slideInUp {
		from {
			opacity: 0;
			transform: translateY(30rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* 倒计时闪烁效果 */
	.countdown-timer {
		animation: pulse 2s ease-in-out infinite;
	}

	@keyframes pulse {

		0%,
		100% {
			opacity: 1;
		}

		50% {
			opacity: 0.7;
		}
	}

	/* 深色模式适配 */
	@media (prefers-color-scheme: dark) {
		.content-wrapper {
			background: #1a1a1a;
		}

		.order-card {
			background: #2d2d2d;
			box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.3);
		}

		.order-number {
			color: #fff;
		}

		.order-date {
			color: #999;
		}

		.product-name {
			color: #fff;
		}

		.price-label,
		.price-value {
			color: #ccc;
		}

		.total-label {
			color: #fff;
		}

		.order-footer {
			background: rgba(40, 40, 40, 0.5);
			border-top: 1rpx solid #404040;
		}

		.action-buttons {
			border-top: 1rpx solid #404040;
		}

		.btn-secondary {
			background: #404040;
			color: #ccc;
			border: 1rpx solid #555;
		}

		.btn-secondary:active {
			background: #555;
		}
	}

	/* Add search box styling */
	.search-box {
		padding: 10px 15px;
		background-color: #fff;
		margin-bottom: 8px;
	}

	.search-input-wrap {
		display: flex;
		align-items: center;
		background-color: #f5f5f5;
		border-radius: 20px;
		padding: 6px 12px;
	}

	.search-icon {
		margin-right: 8px;
		color: #999;
		font-size: 16px;
	}

	.search-input {
		flex: 1;
		height: 30px;
		font-size: 14px;
		border: none;
		background-color: transparent;
	}

	.clear-icon {
		width: 20px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		color: #999;
		font-size: 18px;
	}

	.load-more {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
		border-top: 1rpx solid #f5f5f5;
	}

	.loading-more {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #999;
	}

	.loading-spinner.small {
		width: 30rpx;
		height: 30rpx;
		border: 2rpx solid #f5f5f5;
		border-top: 2rpx solid #ff6700;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 10rpx;
	}

	.no-more {
		color: #999;
		font-size: 24rpx;
	}

	.pull-more {
		color: #666;
		font-size: 24rpx;
	}
</style>